<template>
  <div class="app-container">
    <div class="table-search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <!--模糊查询-->
        <el-form-item label="工厂" prop="plant">
          <el-input
              v-model="queryParams.plant"
              placeholder="请输入工厂"
              @keyup.enter="handleQuery"
              clearable
              class="input-inner"
              style="width: 200px"
          />
        </el-form-item>
        <!--模糊查询-->
        <el-form-item label="物料编号" prop="itemCode">
          <el-input
              v-model="queryParams.itemCode"
              placeholder="请输入物料编号"
              clearable
              class="input-inner"
              style="width: 200px"
              @keyup.enter="handleQuery"
          />

        </el-form-item>
        <!--模糊查询-->
        <el-form-item label="物料名称" prop="itemName">
          <el-input
              v-model="queryParams.itemName"
              placeholder="请输入物料名称"
              clearable
              class="input-inner"
              style="width: 220px"
              @keyup.enter="handleQuery"
          />

        </el-form-item>

        <el-form-item label="周" prop="week">
          <el-input
              v-model="queryParams.week"
              placeholder="请输入周"
              clearable
              class="input-inner"
              style="width: 220px"
              @keyup.enter="handleQuery"
          />

        </el-form-item>

        <el-form-item>
          <el-button class="filter-item" type="primary" @click="handleQuery">
            <el-icon>
              <Search/>
            </el-icon>
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <el-icon >
              <Refresh/>
            </el-icon>
            重置
          </el-button>
          <el-button type="primary" @click="exportExcel">
            <el-icon>
              <Download/>
            </el-icon>
            导出
          </el-button>

        </el-form-item>

      </el-form>
    </div>
    <el-card shadow="never" class="table-container">
      <el-table :data="tableData" v-loading="loading" stripe height="calc(100vh - 200px)" style="width: 100%">
        <el-table-column prop="productionPlant" label="工厂" :min-width="100"/>
        <!--        <el-table-column prop="name" label="名称" :min-width="100"/>-->
        <el-table-column prop="material" label="物料" :min-width="200"/>
        <el-table-column prop="materialName" label="描述" :min-width="200"/>
        <el-table-column prop="baseUnit" label="基本计量单位" :min-width="200"/>
        <el-table-column prop="plannedOrderType" label="订单类型" :min-width="200"/>
        <!-- 动态列 -->
        <el-table-column
            v-for="(value, week) in dynamicColumns"
            :key="week"
            :prop="`weekQuantityMap.${week}`"
            :label="week"
            :min-width="100"
        />
      </el-table>
    </el-card>
  </div>

</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {ElForm} from "element-plus";
import {Download, Refresh, Search} from "@element-plus/icons-vue";
import service from "@/axios/request.ts";
import {config} from '@/config';

const queryFormRef = ref(ElForm);
const loading = ref(false)
const queryParams = reactive({
  plant: 'TK10',
  itemCode: '',
  itemName: '',
  week: '',
});
const tableData = ref([]);
const dynamicColumns = ref({})
onMounted(() => {
  console.log(`the component is now mounted.`)
  handleQuery()
})

const handleQuery = () => {
  console.log('handleQuery');
  loading.value = true;
  // http://localhost:8889/plan-order
  service.get(`${config.platformUrl}/plan-order`, {
    params: {
      plant: queryParams.plant,
      itemCode: queryParams.itemCode,
      itemName: queryParams.itemName,
      week: queryParams.week,
    }
  })
      .then(function (response) {
        console.log(response.data);
        tableData.value= response.data.data;
        // 更新动态列
        dynamicColumns.value = getDynamicColumns(response.data.data)
      })
      .catch(function (error) {
        console.log(error);
      })
      .finally(function () {
        // 总是会执行
        loading.value = false;
      });
}

// 获取动态列数据
const getDynamicColumns = (data:any) => {
  const columns = {}
  if (data && data.length > 0) {
    const firstItem = data[0]
    if (firstItem.weekQuantityMap) {
      Object.keys(firstItem.weekQuantityMap).forEach(week => {
        // @ts-ignore
        columns[week] = week
      })
    }
  }
  return columns
}
const resetQuery = () => {
  console.log("resetQuery");
  queryFormRef.value.resetFields();
  handleQuery();
}
const exportExcel = () => {
  console.log('exportExcel');
}
</script>

<style scoped>
.app-container {
  padding: 10px;
  height: calc(100vh - 50px);
  width: calc(100vw - 100px);
}

.table-search {
  padding: 15px 20px 0 20px;
  margin-bottom: 20px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);

  display: flex;
  justify-content: space-between;
}

.table-container > .el-card__header {
  padding: calc(var(--el-card-padding) - 8px) var(--el-card-padding);
}
</style>